<template>
  <div class="report">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <el-form :model="form" label-width="80px" style="margin: 10px" :rules="rules">
            <el-form-item label="报告名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="日期范围" prop="dateRange">
              <div class="block">
                <el-date-picker
                  v-model="form.dateRange"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </el-form-item>
            <el-button type="primary" :loading="loading" @click="genReport">生成报告</el-button>
            <el-button type="" @click="clearReport">清空</el-button>
          </el-form>
        </el-card>
      </el-col>
      <el-col>

        <el-divider></el-divider>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>分析结论</span>
          </div>
          <div class="text item" v-if="submitting">
            <mavon-editor
              class="md"
              :value="conclusion"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
            />
          </div>
        </el-card>
        <div style="margin: 10px 0"></div>
        <el-card>
          <div slot="header" class="clearfix">
            <span>可视化图表</span>
          </div>
          <div class="text item">
            <el-card v-if="option[0] !== '{}'" class="cardBtm">
              <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[0])" v-if="submitting"/>
            </el-card>
            <el-card v-if="option[1] !== '{}'" class="cardBtm">
              <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[1])" v-if="submitting"/>
            </el-card>
            <el-card v-if="option[2] !== '{}'" class="cardBtm">
              <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[2])" v-if="submitting"/>
            </el-card>
            <el-card v-if="option[3] !== '{}'" class="cardBtm">
              <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[3])" v-if="submitting"/>
            </el-card>
            <el-card v-if="option[4] !== '{}'" class="cardBtm">
              <ECharts style="height: 500px;" ref="chart" :option="JSON.parse(option[4])" v-if="submitting"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {genReport} from "@/api/carbon-manage/reports";
import {Loading} from 'element-ui';

export default {
  data() {
    return {
      loading: false,
      option: ["{}", '{}', '{}', '{}', '{}'],
      chart: {},
      submitting: false,
      formState: {},
      conclusion: '',
      form: {
        name: '',
        dateRange: [],
      },
      rules: {
        name: [
          {required: true, message: '请输入报告名称', trigger: 'blur'}
        ],
        dateRange: [
          {required: true, message: '请输入日期范围', trigger: 'blur'}
        ],
        dataOrigin: [
          {required: true, message: '请输入数据来源', trigger: 'blur'}
        ]
      }
    };
  },
  created() {
  },
  methods: {
    clearReport() {
      this.form.dateRange = [];
      this.form.name = '';
      this.conclusion = '';
      this.option = ['{}', '{}', '{}', '{}', '{}'];
      this.submitting = false;

    },
    genReport() {
      const notification = this.$notify({
        title: '提示',
        message: '报告生成中....',
        duration: 0,
        iconClass: 'el-icon-loading'
      });
      this.loading = true;
      genReport(this.form).then(res => {
        console.log(res)
        this.conclusion = res.data.conclusion;
        this.option = res.data.titleCodeList.map(item => {
          try {
            JSON.parse(item.code);
            return item.code;
          } catch (e) {
            return '{}';
          }
        });

        this.submitting = true;
        this.loading = false;
        notification.close();
        this.$notify({
          title: '成功',
          message: '报告生成成功',
          type: 'success'
        });
      }).catch(reason => {
        this.submitting = false;
        this.loading = false;
        this.$message.error(reason.message);
        notification.close();
        this.$notify.error({
          title: '错误',
          message: '报告生成失败'
        });
      })
    },
  }
}
</script>

<style scoped lang="scss">
.report {
  margin: 10px;
}

.cardBtm {
  margin-bottom: 10px;
}
</style>
